import React, { useState, useEffect, useRef } from "react";
import { Image, Button, message, Table, List } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import { PlusOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import ProForm, {
  ModalForm,
  ProFormDigit,
  ProFormText,
} from "@ant-design/pro-form";
import { history, useLocation } from "umi";
import moment from "moment";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList } from "@/api/readRecord";
import UploadFile from "@/components/UploadFile";

export default () => {
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "手机号",
      dataIndex: "mobile",
    },

    {
      title: "总佣金",
      dataIndex: "address",
      search: false,
    },
    {
      title: "可提现佣金",
      dataIndex: "address",
      search: false,
    },
    {
      title: "待入账",
      dataIndex: "address",
      search: false,
    },
  ];

  const formRef = useRef();

  // 佣金明细
  const renderCommissionModal = (row) => {
    const columns = [
      {
        title: "事项",
        dataIndex: "content",
      },
      {
        title: "佣金",
        dataIndex: "money",
      },
      {
        title: "购买日期",
        dataIndex: "createTime",
      },
    ];
    return (
      <ModalForm
        key="commission"
        formRef={formRef}
        layout="horizontal"
        title="佣金明细"
        width={600}
        submitter={false}
        trigger={
          <Button style={{ marginRight: 10 }} type="primary">
            佣金明细
          </Button>
        }
      >
        <Table
          columns={columns}
          pagination={false}
          dataSource={row?.withdrawalRecordList}
        />
      </ModalForm>
    );
  };

  // 提现记录
  const renderWithdrawalRecordModal = (row) => {
    const columns = [
      {
        title: "提现时间",
        dataIndex: "createTime",
      },
      {
        title: "提现金额",
        dataIndex: "money",
      },
      {
        title: "凭证",
        dataIndex: "img",
        render: (_, record) => {
          return <Image src={record.img} width={100} height={100} />;
        },
      },
    ];
    return (
      <ModalForm
        key="withdrawal"
        formRef={formRef}
        layout="horizontal"
        title="提现记录"
        width={600}
        submitter={false}
        trigger={
          <Button style={{ marginRight: 10 }} type="primary">
            提现记录
          </Button>
        }
      >
        <Table
          columns={columns}
          pagination={false}
          dataSource={row?.withdrawalRecordList}
        />
      </ModalForm>
    );
  };

  // 书包交易用户
  const renderChangeUserModal = (record) => {
    return (
      <ModalForm
        key="changeUser"
        formRef={formRef}
        layout="horizontal"
        title="购买书包交易用户"
        width={600}
        submitter={false}
        trigger={<Button type="primary">{record.num}个</Button>}
      >
        <List
          itemLayout="horizontal"
          dataSource={record.list}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src={item.picture} />}
                title={item.userName}
                description={item.desc}
              />
              <div>购买日期：2024-02-21</div>
            </List.Item>
          )}
        />
      </ModalForm>
    );
  };

  // 邀请注册
  const renderRegisterModal = (record) => {
    return (
      <ModalForm
        key="register"
        formRef={formRef}
        layout="horizontal"
        title="邀请注册"
        width={600}
        submitter={false}
        trigger={<Button type="primary">{record.num}个</Button>}
      >
        <List
          itemLayout="horizontal"
          dataSource={record.list}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src={item.picture} />}
                title={item.userName}
              />
              <div>注册日期：2024-02-21</div>
            </List.Item>
          )}
        />
      </ModalForm>
    );
  };

  // 达标情况
  const renderOkModal = (row) => {
    const columns = [
      {
        title: "时间",
        dataIndex: "createTime",
      },
      {
        title: "书包交易用户",
        dataIndex: "money",
        render: (_, record) => {
          return renderChangeUserModal(record);
        },
      },
      {
        title: "邀请注册",
        dataIndex: "money",
        render: (_, record) => {
          return renderRegisterModal(record);
        },
      },
      {
        title: "达标情况",
        dataIndex: "money",
      },
    ];
    return (
      <ModalForm
        key="ok"
        formRef={formRef}
        layout="horizontal"
        title="达标情况"
        width={600}
        submitter={false}
        trigger={
          <Button style={{ marginRight: 10 }} type="primary">
            达标情况
          </Button>
        }
      >
        <Table
          columns={columns}
          pagination={false}
          dataSource={row?.withdrawalRecordList}
        />
      </ModalForm>
    );
  };

  // 提现
  const renderWithdrawalModal = (record, actionRef) => {
    const handleAddOrUpdate = async (fields) => {
      const postData = {
        ...fields,
      };
      const res = await refund(postData);
      if (res.data) {
        message.success("提现成功");
        actionRef?.current.reload();
        return true; // 关闭弹框
      }
    };

    return (
      <ModalForm
        key="refund"
        labelCol={{
          span: 4,
        }}
        formRef={formRef}
        layout="horizontal"
        title="审核"
        width={600}
        trigger={
          <Button type="primary">
            提现
          </Button>
        }
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            formRef.current?.resetFields();
          },
        }}
        onFinish={async (values) => {
          return await handleAddOrUpdate(values);
        }}
        initialValues={{
          ...record,
        }}
      >
        <ProFormText label="可提现金额" disabled name="orderMoney" />
        <ProFormDigit
          label="提现金额"
          name="serviceNum"
          placeholder="请输入提现金额"
          rules={[
            { required: true, message: "请输入提现金额" },
            {
              validator: async (_, value) => {
                if (value && value > record.orderMoney) {
                  return Promise.reject(
                    new Error("提现金额不能大于可提现金额")
                  );
                }
              },
            },
          ]}
        />
        <ProForm.Item
          label="凭证"
          name="img"
          rules={[{ required: true, message: "请上传凭证" }]}
        >
          <UploadFile />
        </ProForm.Item>
      </ModalForm>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        columns,
        modalWidth: 700,
        fetchList,
        renderEdit: (record, actionRef) => {
          return (
            <>
              {
                renderCommissionModal(record, actionRef) // 佣金明细
              }
              {
                renderWithdrawalRecordModal(record, actionRef) // 提现记录
              }
              {
                renderOkModal(record, actionRef) // 达标情况
              }
              {
                renderWithdrawalModal(record, actionRef) // 提现
              }
            </>
          );
        },
        renderAdd: () => {},
        layout: "horizontal",
        actionColumnWidth: 300,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
